<template>
  <div class="ArticleList">
    <!-- 工具栏 -->
    <div class="toolbar">
      <el-button title="addArticle_btn" type="primary" size="small" @click="show_add">添加</el-button>
      <el-button title="delArticle_btn" type="primary" size="small" @click="all_del">批量删除</el-button>
      名称：
      <el-input label="关键字" type="text" placeholder="请输入文章名称" size="medium" v-model="search_Article_text"
        @keyup.native.enter="Article_name_input">
        <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
      </el-input>
    </div>
    <!-- 数据列表 -->
    <el-table :data="list" stripe border ref="eltable" @selection-change="selectionChange">
      <!-- articleID	title	cover	summary	content	viewCount	likeCount	unlikeCount	createAt	updatetime	active	className	classID	tag_list_id -->

      <el-table-column type="selection"></el-table-column>
      <el-table-column label="articleID" width="80" prop="articleID"></el-table-column>
      <el-table-column label="封面" width="80">
        <template slot-scope="scope">
          <el-image :src="scope.row.cover" fit="fill" :lazy="true"></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="title" label="标题" :show-overflow-tooltip="true" ></el-table-column>
      <el-table-column prop="summary"  label="摘要"  :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="className" label="分类"></el-table-column>
      <el-table-column label="标签" >
        <template slot-scope="scope" v-if="tag_items">
          <p v-for="(itema, index) in scope.row.tag_list_id" :key="index">{{ reTagName(itema) }}
          </p>
        </template>
      </el-table-column>
      <el-table-column prop="viewCount" label="浏览量"></el-table-column>
      <el-table-column prop="likeCount" label="点赞数"></el-table-column>
      <el-table-column prop="unlikeCount" label="不喜欢数"></el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <!-- <el-tooltip :content="'Switch value: ' + scope.row.active" placement="top"> -->
            <el-switch style="display: block" v-model="scope.row.active" active-color="#13ce66" inactive-color="#ff4949"
              active-text="启用" inactive-text="禁用" :active-value="1" :inactive-value="0"
              @change="active_change($event, scope.row)">
            </el-switch>
          <!-- </el-tooltip> -->
          <el-button type="primary" size="mini" @click="handleClick(scope.row.articleID)">详情</el-button>
          <el-popover placement="top" width="160" v-model="scope.row.delete_visible">
            <p>确定要删除吗？</p>
            <div style="text-align: right; margin: 0 ">
              <el-button size="mini" type="text" @click="scope.row.delete_visible = false">取消</el-button>
              <el-button type="primary" size="mini"
                @click="scope.row.delete_visible = false; handledelete(scope.row.articleID, scope.row.relation_id)">确定
              </el-button>
            </div>
            <el-button type="danger" size="mini" slot="reference">删除</el-button>
          </el-popover>
          <!-- <el-button type="primary" size="mini" @click="handledelete(scope.row.articleID, scope.row.relation_id)">删除
          </el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加面板 -->
    <insertForm :dialogVisible_item="insertDialogflag" @dialogVisible_item_change="insertdialogVisible_item_change"
      @list_change="list_change"></insertForm>
    <!-- 更新文章 -->
    <template v-if="upreFresh">
      <shs-ceshi :shs_title="shs_title" :dialogVisible_item="updataDialogflag"
        @dialogVisible_item_change="dialogVisible_item_change" @list_change="list_change" :articleID="articleID"
        item_name1="文章" :item_name1_con="item_name1_con"></shs-ceshi>
    </template>
    <!-- 分页 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :current-page.sync="Article_currentPage" :page-size="page_size" layout="prev, pager, next, jumper"
      :pager-count="7" :total="total">
    </el-pagination>
  </div>
</template>

<script>
/*导入获取文章*/
import { getArticle } from "@/request/api";
/*导入删除文章 */
import { deleteArticle } from "@/request/api";
/*导入更新文章 */
import { updataArticle } from "@/request/api";
/*导入获取标签 */
import { getTags } from "@/request/api";
export default {
  name: "ArticleList",
  props: [],
  data() {
    return {
      upreFresh: false,//编辑数据的销毁标识
      dialogFormVisible: true,
      updataDialogflag: false, //更新
      insertDialogflag: false, //添加
      shs_title: "文章添加",
      item_name1_con: null, //名称属性值
      articleID: 0, //文章ID
      select_list: [], //选择列表--批处理 selectionChange
      search_Article_text: "", //搜索 文章名称
      adminID: 0, //管理员id
      list: [], //分页数据
      total: 0, //文章总数
      page_size: 5, //每页最多5条数据
      Article_currentPage: 1, //当前页
      begin_index: 0, //当前索引
      table_list_sele: [],
      search_ArticleName_flag: true, //搜索防抖
    };
  },
  //挂载后
  mounted() {
    //添加adminID
    // window.localStorage.setItem("adminID", 110);
    console.log("文章页挂载");
    this.adminID = JSON.parse(window.localStorage.getItem("adminID"));
    //初始化数据
    /*1.获取标签数据*/
    //获取全部标签 启用不启用的都获取
    getTags({
      begin_index: 0,
      page_size: 99999,
    })
      .then((data) => {
        if (data?.data.code == 200) {
          this.tag_items = data?.data?.data?.list;
          // console.log("this.tag_items ", this.tag_items);
          //2.获取文章数据
          getArticle()
            .then((data) => {
              if (data?.data.code == 200) {
                this.list = data?.data?.data.list;
                this.total = data?.data?.data.total;
                // console.log("this.list", this.list);
                this.$message({ message: data?.data?.msg, type: "success" });
              } else {
                this.$message({ message: data?.data?.msg, type: "info" });
              }
            })
            .catch((err) => {
              console.log("err", err);
              this.list = null;
              this.total = 0;
              this.$message({ message: err, type: "error" });
            });
        }
      })
      .catch((err) => {
        console.log("获取标签失败", err);
        this.tag_items = null;
      });
  },
  methods: {
    //计算标签
    reTagName(tagID) {
      for (let i = 0; i < this.tag_items.length; i++) {
        if (tagID == this.tag_items[i].tagID) {
          return this.tag_items[i]?.tagName
        }
      }
      return ''
    },
    //当前页改变时
    handleCurrentChange(val) {
      this.begin_index = (val - 1) * 5;
      this.search_Article();
    },
    //搜索、分页
    search_Article(a) {
      let obj = {
        begin_index: this.begin_index,
        title: this.search_Article_text,
        page_size: 5,
      };
      getArticle(obj)
        .then((data) => {
          // let type = "error";
          // if (data?.data?.code == 200) {
          //   type = "success";
          // }
          // if (a != 1) {
          //   this.$notify({
          //     message: data?.data?.msg,
          //     type: type,
          //     duration: 800,
          //   });
          // }
          this.list = data.data.data.list;
          this.total = data.data.data.total;
        })
        .catch((err) => {
          console.log("err", err);
          this.list = null;
          this.total = 0;
          if (a != 1) {
            this.$message({ message: err, type: "error" });
          }
        });
    },
    //分页 每页的条数改变时
    handleSizeChange(val) {
      console.log("分页 每页的条数改变时", val);
    },
    //批量删除
    all_del() {
      let length = this.select_list.length; //执行的个数
      let _this = this;
      if (length == 0) {
        _this.$message({ message: "请选择要处理的元素", type: "info" });
        return;
      }
      //提示 确认是否删除
      this.$confirm(`你确定要删除这${length}个元素吗？`)
        .then(() => {
          for (let i = 0; i < length; i++) {
            this.handledelete(_this.select_list[i].articleID, _this.select_list[i].relation_id);
          }
        })
        .catch(() => {
          _this.$message({ message: "取消删除操作", type: "info" });
        });
    },
    //批处理，选择改变
    selectionChange(list) {
      console.log("list", list);
      this.select_list = list;
    },
    //是否启用改变
    active_change(val, row) {
      let _this = this;
      updataArticle(row)
        .then((data) => {
          console.log("data", data);
          if (data?.data.code == 200) {
            _this.$message({ message: data.data.msg, type: "success" });
          } else if (data?.data.code == 5001) {
            _this.$message({ message: data.data.msg, type: "warning" });
          } else {
            _this.$message({ message: data.data.msg, type: "error" });
          }
        })
        .catch((err) => {
          _this.$message({ message: err, type: "error" });
        });
    },
    //添加显示
    show_add() {
      //编辑的对话框显示
      this.insertDialogflag = true;
    },
    //在文章搜索框内按回车键进行 搜索
    Article_name_input() {
      this.search(); //调用搜索
    },
    //搜索对应的文章
    search() {
      let _this = this;
      //防抖
      if (this.search_ArticleName_flag) {
        this.search_ArticleName_flag = false;
        setTimeout(function () {
          _this.search_ArticleName_flag = true;
        }, 800);
        //初始化开始索引
        this.begin_index = 0;
        this.Article_currentPage = 1;
        this.search_Article();
      }
    },
    //字符转义
    characterEscape() {
      // let arr=null;
      // arr[0]=str.split('');
    },
    //字符解析转义

    //处理 详情--更新/编辑一体
    handleClick(articleID) {
      //传递articleID
      this.upreFresh = true;
      this.articleID = articleID;
      //编辑的对话框显示
      this.updataDialogflag = true;
    },
    // 处理删除
    handledelete(articleID, relation_id) {
      // for (let i = 0; i < this.list.length; i++) {
      //   if (articleID == this.list[i].articleID) {
      //     this.list.splice(i, 1);
      //   }
      // }
      //记录 id 执行
      let _this = this;
      let obj = {
        userID: JSON.parse(localStorage.getItem("userinfo"))?.userID,
        articleID: articleID,
        relation_id: relation_id
      };
      deleteArticle(obj)
        .then((data) => {
          console.log("data", data);
          if (data?.data.code == 200) {
            _this.$message({ message: data.data.msg, type: "success" });
            _this.search_Article(1);
          } else {
            _this.$message({ message: data.data.msg, type: "error" });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //弹框的显隐 改变事件
    insertdialogVisible_item_change(val) {
      this.insertDialogflag = val;
      // console.log("添加对话框", val);
    },
    dialogVisible_item_change(val) {
      this.updataDialogflag = val;
      this.upreFresh = val;
    },
    //更新 数据的改变事件 重新赋值list
    list_change() {
      this.search_Article(1);
    },
  },
  //计算属性
  computed: {

  },
  components: {
    shsCeshi: () => import("@/components/shs_upload_article.vue"),
    insertForm: () => import("@/components/shs_upload_insert_article.vue"),
  },
};
</script>

<style>
.el-table .cell {
	-webkit-box-sizing: border-box;
  line-height: 25px;
  max-height: 50px ;
	box-sizing: border-box;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: normal;
	word-break: break-all;
	padding-left: 10px;
	padding-right: 10px
}
</style>
<style scoped>
.toolbar {
  margin: 15px 0;
}

.addArticle_btn {
  /* background-color:#fff000; */
  margin-right: 5px;
}

.el-input {
  width: 400px;
}

.el-table th.el-table__cell {
  text-align: center;
  height: auto;
  /* max-height: 50px; */
}

.form_old_name {
  width: 120px;
  height: 50px;
  background: #ff0000;
  position: relative;
}

/* 封面 */
.cover_box {
  width: 200px;
  float: left;
}

/* 分页 */
.el-pagination {
  margin: 30px;
  padding-bottom: 30px;
  float: right;
}

/**设置行高 */
/* .el-table__row .el-table__cell{
  max-height: 50px;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-all;
  line-height: 23px;
  padding-left: 10px;
  padding-right: 10px;
} */
</style>
